<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-3.0.0.js"></script>
</head>
<body>
    <div class="box" style="width:500px;height:500px;position: relative;border: 1px solid #ccc">
            <div class="im" style="width:108px;height:46px;position:absolute;left: 0px;top: 0px"><img src="./image/1.PNG" alt=""></div>
    </div>
    
    <script>
        var t;
        // function run(){
        //     if(parseInt($('.im')[0].style.left)==0&&parseInt($('.im')[0].style.top)==0){
        //         topleft();
        //     }
        //     if(parseInt($('.im')[0].style.left)==500&&parseInt($('.im')[0].style.top)!=0){
        //         topright();
        //     }
        //     if(parseInt($('.im')[0].style.left)==0&&parseInt($('.im')[0].style.top)!=0){
        //         topleft();
        //     }
        // }
    
        // function topleft(){
        //     $('.im').animate({
        //         top:parseInt($('.im').eq(0).parent().height())-46,
        //         left:parseInt($('.im').eq(0).parent().width())
        //     },1000);
        // };
        // function topright(){
        //     $('.im').animate({
        //         top:0,
        //         left:0
        //     },1000);
        // }
        // //alert(parseInt($('.im').eq(0).parent().width()));
        // t=setInterval(run,1000);

        function run(){
            left();
            
            right();
            setTimeout("run()",1000);
        }
        function left(){
            $('.im').animate({
                left:500
            },1000);
        };
        
        function right(){
            $('.im').animate({
                left:0
            },1000);
        }
        t=setTimeout("run()",1000);
    </script>
</body>
</html>